<template>
    <div class="text-sm text-gray-100 h-full flex select-none">
        <div class="bg-slate-800 h-full space-y-2">
            <div class="flex justify-center pb-2 pt-1" @click="router.push('/')">
                <img src="./../../assets/logo.png" class="w-10 h-10 object-cover">
            </div>
            <div class="w-14 py-2 text-center space-y-1 duration-300 cursor-pointer hover:bg-blue-600 hover:text-white"
             :class="{'bg-blue-500 text-white':item.id==pageData.pid}" v-for="(item,index) in dataList" :key="index" @click.stop="select_item(item)">
                <div><i class="ri-xl" :class="item.icon"></i></div>
                <div>{{ item.title }}</div>
            </div>
        </div>
        <div class="overflow-hidden whitespace-nowrap duration-300 shadow-lg" :class="{'w-36':openChildMenu,'w-0':!openChildMenu}">
            <div class="h-12 flex items-center justify-center text-slate-900 font-bold text-base border-b">{{ store.state.pageVar.title }}</div>
            <div class="text-slate-900">
                <div class="h-12 flex items-center justify-center hover:bg-[#E8F4FF] hover:text-blue-600 cursor-pointer"
                :class="{'bg-[#E8F4FF] text-blue-600':pageData.sid==item.id}"
                v-for="(item,index) in pageData.children" :key="index" @click.stop="cmenu(item)">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import store from '@/store'
    import { useRouter } from "vue-router"
    import {computed,reactive,onMounted } from "vue"
    const props=defineProps({
        openChildMenu:{
            default:false
        }
    })
    const emits=defineEmits(['toggle_menu'])
    const router=useRouter()
    const dataList=computed(()=>store.state.admin.routes)

    const pageData=reactive({
        pid:sessionStorage.getItem('menu_status_pid')||0,
        sid:sessionStorage.getItem('menu_status_sid')||0,
        children:[],
    })

    const select_item=(item)=>{
        pageData.pid=item.id
        sessionStorage.setItem('menu_status_pid',item.id)
        if(item.children&&item.type==1){
            pageData.children=item.children
            pageData.sid=item.children[0].id
            sessionStorage.setItem('menu_status_sid',item.children[0].id)
            router.push(item.children[0].path)
            emits('toggle_menu',true)
        }else{
            emits('toggle_menu',false)
            router.push(item.path)
        }
    }
    const toogle_child=()=>{
        if(pageData.children.length==0){
            return
        }
        emits('toggle_menu')
    }
    const cmenu=(item)=>{
        if(item.type==2){
            pageData.sid=item.id
            sessionStorage.setItem('menu_status_sid',item.id)
            router.push(item.path)
        }   
    }
    //展开当前菜单
    const currentMenu=()=>{
        dataList.value.forEach(element => {
            if(pageData.pid==element.id){
                if(element.type==1&&element.children){
                    pageData.children=element.children
                    element.children.forEach(son=>{
                        if(pageData.sid==son.id){
                            emits('toggle_menu',true)
                        }
                    })
                }else{
                    emits('toggle_menu',false)
                }
            }
        });
    }
    onMounted(()=>{
        currentMenu()
    })
</script>